<template>
  <div id="page-login">
    <!-- 这是登录界面 -->
    <div class="login-box">
      <div class="login-left">
        <img
          src="@/assets/images/login-banner.jpg"
          :style="`height:${domHeight}px;`"
        />
      </div>
      <div class="login-right" ref="myDiv">
        <router-view></router-view>
        <span class="note" :style="'text-align:' + fonstState">
          <router-link :to="'/login/' + goPath">{{ goto }}</router-link>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  data() {
    return {
      erd: null,
      domHeight: null, //实时屏幕高度
      resizeObserver: null,
      // 点击跳转的连接
      goPath: 'RT',
      // 跳转的文字提示
      goto: '没有账号?去注册 >',
      // 设置字体位置
      fonstState: 'right',
    }
  },
  methods: {
    setData(path) {
      if (path === '/login/RT') {
        this.goPath = 'LT'
        this.goto = '< 已有账号?去登录'
        this.fonstState = 'left'
      } else if (path === '/login/LT') {
        this.goPath = 'RT'
        this.goto = '没有账号?去注册 >'
        this.fonstState = 'right'
      }
    },
    setHeight() {},
  },
  created() {
    // 获取路由信息
    // this.router = this.$route.fullPath
    this.setData(this.$route.fullPath)
  },
  mounted() {
    const myDiv = this.$refs.myDiv
    this.erd = elementResizeDetectorMaker()
    this.erd.listenTo(myDiv, (element) => {
      this.domHeight = element.offsetHeight
    })
  },
  beforeDestroy() {
    const myDiv = this.$refs.myDiv
    this.erd.uninstall(myDiv)
  },
  watch: {
    // 监听路由变化
    $route(to) {
      this.setData(to.path)
    },
  },
}
</script>

<style lang="less" scoped>
#page-login {
  padding: 4rem 0;
  width: 100%;
  height: 100%;
  background-color: #f3f7f9;
  .login-box {
    margin: auto;
    min-height: 36rem;
    width: 62.5rem;
    background-color: white;
    box-shadow: 0 0 1.25rem 0 rgb(12 1 4 / 5%);
    border-radius: 0.25rem;
    overflow: hidden;
    .login-left {
      float: left;
      width: 26.375rem;
      img {
        width: 100%;
      }
    }
    .login-right {
      float: right;
      padding: 4rem;
      width: 36.125rem;
      height: 100%;
      .note {
        display: inline-block;
        width: 100%;
        a:hover {
          color: #1989fa;
        }
      }
    }
  }
}
</style>
